<!DOCTYPE HTML>
<html>

<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>一套基于 React-ANTD、SignalR、.NET CORE 的消息推送解决方案 | DeepThought</title>
  <meta name="google-site-verification" content="Ei6mmDdf-cJwox1RvJOeX8Dc720fqWjZQu-Ww2BjBt4">
  
  <meta name="author" content="积慕">
  
  <meta name="description" content="使用 signalR 实现消息推送,任务推送">
  
  
  <meta name="keywords" content="aspnet core signalr,signalr,signal react,signalR react,消息推送,消息通知,.NET CORE signalR,signalR di,signalR ioc,消息推送,消息通知">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
  <meta property="og:title" content="一套基于 React-ANTD、SignalR、.NET CORE 的消息推送解决方案">
  <meta property="og:site_name" content="DeepThought">

  
  <meta property="og:image" content>
  

  <link href="https://pic.zhuliang.ltd/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link rel="alternate" href="/atom.xml" title="DeepThought" type="application/atom+xml">
  <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">

  <link rel="stylesheet" href="//at.alicdn.com/t/font_1187293_8fec2ou5fyx.css">

  <!-- <link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.6.0/styles/github.min.css"> -->
  <!-- <script src="//cdn.bootcss.com/highlight.js/9.6.0/highlight.min.js"></script> -->
  <script src="/js/highlight.min.js"></script>

  <link rel="stylesheet" href="/css/markdown.css">

  <script src="/js/av-min.3.0.4.js"></script>
  <script src="/js/Valine.min.1.3.6.js"></script>

</head></html>

<body>
  <header id="header" class="inner"><div class="alignleft">
  <h1><a href="/">DeepThought</a></h1>
  <h2><a href="/">知识需沉淀，更需分享</a></h2>
</div>
<nav id="main-nav" class="alignright">
  <ul>
    
      <li><a href="/">首页</a></li>
    
      <li><a href="/about">关于我</a></li>
    
      <li><a href="/atom.xml">订阅RSS</a></li>
    
  </ul>
  <div class="clearfix"></div>
</nav>
<div class="clearfix"></div>
        </header>
  <div id="content" class="inner">
    <div id="main-col" class="alignleft"><div id="wrapper"><article class="post">
  
  <div class="post-content">
    <header>
      
        <div class="icon"></div>
      

 
      
  
    <h1 class="title">一套基于 React-ANTD、SignalR、.NET CORE 的消息推送解决方案</h1>
  


      
        <time datetime="2020-07-23T04:20:43.000Z">
          create: 2020-07-23 12:20:43 | update: 2020-07-23 20:29:01
            <span style="float: right;">
    <span class="post-count" id="busuanzi_container_page_pv" style="display: inline;">
        
        本文总阅读量: <span id="busuanzi_value_page_pv"></span>&nbsp;次
        <span class="blueSeparate">&nbsp;|&nbsp;</span>
        
        <span class="post-count">文章总字数:&nbsp;865&nbsp;字</span>
    <span class="blueSeparate">&nbsp;|&nbsp;</span>
    <span class="post-count">阅读约需:&nbsp;4&nbsp;分钟</span>
    <br>
</span>
</span>
        </time>
      
            
    </header>
    <div class="entry">
      
      <blockquote>
<p>本文对应的环境：React + ANTD + .NET CORE WEB API + SignalR</p>
<ul>
<li>本文示例部分分为<code>前端</code>和<code>后端</code>两部分</li>
</ul>
</blockquote>
<p>效果图：<br><img src="https://pic.zhuliang.ltd/20200723173223.gif" alt></p>
<h1 id="前端代码"><a href="#前端代码" class="headerlink" title="前端代码"></a>前端代码</h1><p>用到的包和版本如下：</p>
<p><img src="https://pic.zhuliang.ltd/20200723172312.png" alt></p>
<p>前端组件代码如下：</p>
<a id="more"></a>
<p></p><p class="code-caption" data-lang="javascript" data-line_number="backend" data-trim_indent="backend" data-label_position="outer" data-labels_left="Code" data-labels_right=":" data-labels_copy="Copy Code"><span class="code-caption-label"></span></p><p></p>
<pre><code class="javascript">import React from &#39;react&#39;;
import { notification, Typography } from &#39;antd&#39;;
import { ExclamationCircleFilled } from &#39;@ant-design/icons&#39;;
import * as signalR from &#39;@microsoft/signalr&#39;;
import styles from &#39;./style.less&#39;;
import config from &#39;../../config&#39;;
import urlParam from &#39;../../utils/UrlParamHelper&#39;;
const { Paragraph, Link } = Typography;
class Notification extends React.Component {
  constructor (props) {
    super(props);
  }
  render () {
    return null;
  }
  componentDidMount () {
    const protocol = new signalR.JsonHubProtocol();
    const transport = signalR.HttpTransportType.WebSockets;
    const options = {
      transport;
    }
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(`${config.baseURL}api/TaskNotification?token=${urlParam.token}`, options)
      .withHubProtocol(protocol)
      .withAutomaticReconnect()
      .build();
    this.connection.on(&#39;TaskNotifiy&#39;, this.onNotifReceived);
    this.connection.start()
      .then(() =&gt; console.info(&#39;SignalR Connected&#39;))
      .catch(err =&gt; console.error(&#39;SignalR Connection Error: &#39;, err));
  }
  componentWillUnmount () {
    this.connection.stop();
  }
  onNotifReceived (taskNo, taskTitle) {
    notification.info({
      message: &#39;任务提醒：&#39;,
      description: {taskTitle},
      placement: &#39;bottomRight&#39;,
      duration: null,
      icon: &lt;ExclamationCircleFilled className={styles.icon} /&gt;
    })
  }
};
export default Notification;
</code></pre>
<h1 id="后端代码："><a href="#后端代码：" class="headerlink" title="后端代码："></a>后端代码：</h1><blockquote>
<p>.NET CORE 版本为 2.2</p>
</blockquote>
<p>后端项目结构：<br><img src="https://pic.zhuliang.ltd/20200723170617.png" alt></p>
<ul>
<li>∵ SingalR 客户端在连接的时候只有 ConnectionId，所以后端代码会将用户和ConnectionId 进行绑定（这里我使用的是 Redis，你可以按你自己情况来）</li>
</ul>
<h2 id="TaskNotificationHub-cs"><a href="#TaskNotificationHub-cs" class="headerlink" title="TaskNotificationHub.cs"></a>TaskNotificationHub.cs</h2><ul>
<li>需在 Startup 中注册该类后</li>
<li>需集成 Hub 类，并根据自身业务情况重写 OnConnectedAsync 和 OnDisconnectedAsync。<ul>
<li>这里我通过这 2 个方法来进行用户和 ConnectionId 的绑定和解绑。</li>
<li>每次有新用户连接和老连接断开都会调用这 2 个方法。</li>
</ul>
</li>
</ul>
<p></p><p class="code-caption" data-lang="csharp" data-line_number="backend" data-trim_indent="backend" data-label_position="outer" data-labels_left="Code" data-labels_right=":" data-labels_copy="Copy Code"><span class="code-caption-label"></span></p><p></p>
<pre><code class="csharp">
    public class TaskNotificationHub : Hub
    {
        private static IServiceProvider _serviceProvider;

        public static void Init(IServiceProvider serviceProvider)
        {
            _serviceProvider = serviceProvider;
        }

        /// &lt;summary&gt;
        /// 
        /// &lt;/summary&gt;
        /// &lt;returns&gt;&lt;/returns&gt;
        public async override Task OnConnectedAsync()
        {
            var token = Context.GetHttpContext().Request.Query[&quot;token&quot;].ToString();

            if (!string.IsNullOrEmpty(token))
            {
                /*根据令牌获取用户的信息*/
                {
                    await RedisClient.Instance.SetAsync(&quot;缓存key-用户标识&quot;, this.Context.ConnectionId);
                }
            }
            await base.OnConnectedAsync();
        }

        public async override Task OnDisconnectedAsync(Exception exception)
        {
            var token = Context.GetHttpContext().Request.Query[&quot;token&quot;].ToString();
            if (!string.IsNullOrEmpty(token))
            {
                /*根据令牌获取用户的信息*/

                //清除缓存
                await RedisClient.Instance.RemoveAsync(&quot;缓存key-用户标识&quot;);
                }
            }
            await base.OnDisconnectedAsync(exception);
        }
    }
</code></pre>
<h2 id="Startup-cs"><a href="#Startup-cs" class="headerlink" title="Startup.cs"></a>Startup.cs</h2><p></p><p class="code-caption" data-lang="csharp" data-line_number="backend" data-trim_indent="backend" data-label_position="outer" data-labels_left="Code" data-labels_right=":" data-labels_copy="Copy Code"><span class="code-caption-label"></span></p><p></p>
<pre><code class="csharp">public void ConfigureServices(IServiceCollection services)
{
    /*其他代码*/

    services.AddCors(
        options =&gt; options.AddPolicy(
            DefaultCorsPolicyName,
             builder =&gt; builder.WithOrigins(&quot;http://localhost:3000&quot;)
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials()
                )
            );

    services.AddSignalR();  //注册 SignalR
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactor)
{
    /*其他代码*/
    app.UseCors(DefaultCorsPolicyName);

    var webSocketOptions = new WebSocketOptions()
    { // 这块选项设置最好跟客户端保持一致（若使用 nginx 等，亦需做下对应。）
        KeepAliveInterval = TimeSpan.FromSeconds(120),
        ReceiveBufferSize = 4 * 1024
    };
    webSocketOptions.AllowedOrigins.Add(&quot;http://localhost:3000&quot;);
    app.UseWebSockets(webSocketOptions);
    app.UseSignalR(routes =&gt;
    {
        routes.MapHub&lt;TaskNotificationHub&gt;(&quot;/api/TaskNotification&quot;); //注册 SignalR 并指定路由
    });

    app.UseMvc();
}
</code></pre>
<ul>
<li>需要注意的是项目是<code>前后端分离</code>的，在 UI 建立长连接的时候可能存在跨域的问题，需要显式设定下 <code>CORS</code>。</li>
<li>这里显式声明了使用 websocket。</li>
<li>跨域站点你也可以放到 appsettings中进行。</li>
</ul>
<h1 id="Controller"><a href="#Controller" class="headerlink" title="Controller"></a>Controller</h1><p>这里直接通过 Controller 来说明如何发送消息到客户端</p>
<p>TaskController.cs</p>
<p></p><p class="code-caption" data-lang="csharp" data-line_number="backend" data-trim_indent="backend" data-label_position="outer" data-labels_left="Code" data-labels_right=":" data-labels_copy="Copy Code"><span class="code-caption-label"></span></p><p></p>
<pre><code class="csharp">private readonly IHubContext&lt;TaskNotificationHub&gt; _hubContext;

public TaskController(
    IHubContext&lt;TaskNotificationHub&gt; hubContext)
{
    _hubContext = hubContext;
}

[HttpPost]
public async Task&lt;ResultInfo&gt; NotifyAsync(string args)
{
    var connectionId = await RedisClient.Instance.GetAsync&lt;string&gt;(&quot;缓存key&quot;);

   /*你的其他业务代码*/

   //推送消息
    await _hubContext.Clients.Client(connectionId).SendAsync(&quot;TaskNotifiy&quot;, content1, content2,...contentN);

    return ResultInfo.Success();
}
</code></pre>
<ul>
<li>这里通过使用 <code>IHubContext&lt;TaskNotificationHub&gt;</code> 来进行 DI，不然每次调用 Hub 类都是一个新的实例，无法推送，通过 <code>IHubContext</code> 可以让你复用上下文。</li>
</ul>
<h1 id="nginx"><a href="#nginx" class="headerlink" title="nginx"></a>nginx</h1><p>如果你使用了 nginx，则需要进行下如下配置：</p>
<p></p><p class="code-caption" data-lang="sh" data-line_number="backend" data-trim_indent="backend" data-label_position="outer" data-labels_left="Code" data-labels_right=":" data-labels_copy="Copy Code"><span class="code-caption-label"></span></p><p></p>
<pre><code class="sh">location {你的路径}  {
      proxy_connect_timeout   120;
      proxy_read_timeout      120;
      proxy_send_timeout      120;
      proxy_pass {你的站点};
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection &quot;upgrade&quot;;
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
    }
</code></pre>

      

      <div>
        
        <div style="background-color: rgb(255, 23, 0);user-select: auto;height: 3px;width:100%;margin-top: 40px;margin-bottom:15px;"></div>

<!-- <p>常言道：学然后知不足，教然后知困。</p>
<p>我知道你的焦虑，一起共进加油：P</p>
<p>关不关注都无所谓，会根据生活节奏紧凑度定期分享些开发经验、搬砖生涯、痛点、感悟。</p>
<p>
        <img src="https://pic.zhuliang.ltd/20191213133908.gif" alt="欢迎关注我的订阅号：P" />
</p> -->
<ul class="post-copyright" style="margin-left:0px;">
    <li class="post-copyright-author">
        <strong>本文作者：</strong>积慕
    </li>
    <li class="post-copyright-link">
        <strong>本文链接：</strong>
        <a href="/2020/07/frontend/message-pushing-using-react-dotnetcore-signalr.html" title="一套基于 React-ANTD、SignalR、.NET CORE 的消息推送解决方案">https://blog.zhuliang.ltd/2020/07/frontend/message-pushing-using-react-dotnetcore-signalr.html</a>
    </li>
    <li class="post-copyright-license">
        <strong>版权： </strong>
        本站文章均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow"
            target="_blank">CC BY-NC-SA 3.0 CN</a> 许可协议，请勿用于商业，转载注明出处！
    </li>
</ul>
        
      </div>
    </div>

    <footer>
      
      
  
  <div class="categories">
    <a href="/categories/frontend/">frontend</a>
  </div>

      
  
  <div class="tags">
    <a href="/tags/教程/">教程</a>, <a href="/tags/net-core/">.net core</a>, <a href="/tags/react/">react</a>, <a href="/tags/nginx/">nginx</a>
  </div>

      <!-- 
  <div class="addthis addthis_toolbox addthis_default_style">
    
    
      <a class="addthis_button_tweet"></a>
    
    
      <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
    
    
      <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
    
    <a class="addthis_counter addthis_pill_style"></a>
  </div>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
 -->
      
      <div class="clearfix"></div>
    </footer>
  </div>
</article>

<!-- 
<section id="comment">
  <h1 class="title">留言</h1>

  <div id="vcomments" style="background-color: #fff"></div>
  <script>
    new Valine({
      el: '#vcomments',
      appId: 'aTPKmG6tjDo3CbIXzAPzrj4X-gzGzoHsz',
      appKey: 'hNgWFneNpEcMnBJclPQnDgsd',
      notify: true,
      verify: true, //验证码
      avatar: 'monsterid', //https://valine.js.org/avatar.html
      placeholder: '请输入你的评论'
    })
  </script>
</section>
 --> <!--启用/关闭 LeanCloud 评论--></div></div>
    <aside id="sidebar" class="alignright">
  
<div class="widget tag">
  <h3 class="title"><i class="iconfont icon-category"></i>&nbsp;&nbsp;分类</h3>
  <ul class="entry">
  
    <li><a href="/categories/Obsidian/">Obsidian</a><small>1</small></li>
  
    <li><a href="/categories/PowerUser/">PowerUser</a><small>4</small></li>
  
    <li><a href="/categories/backend/">backend</a><small>57</small></li>
  
    <li><a href="/categories/frontend/">frontend</a><small>9</small></li>
  
    <li><a href="/categories/operations/">operations</a><small>5</small></li>
  
    <li><a href="/categories/提前退休/">提前退休</a><small>2</small></li>
  
  </ul>
</div>


  
<div class="widget tag">
  <h3 class="title"><i class="iconfont icon-new3"></i>&nbsp;&nbsp;最新文章</h3>
  <ul class="entry">
    
      <li>
        <a href="/2024/11/PowerUser/install-docker-in-pve-lxc.html">1. 通过 PVE LXC 搭建 docker 环境</a>
      </li>
    
      <li>
        <a href="/2024/11/Obsidian/obsidian-render-pie-chart.html">2. 2 套用于 obsidian 的生成时间占用饼图脚本示例，基于 templater， charts，echarts+dataview</a>
      </li>
    
      <li>
        <a href="/2024/10/PowerUser/fix-ios18-samba-readonly-issue.html">3. 解决 ios 18（包括ipadOS 18） 下通过文件(files app)连接 samba 服务器，目录变成只读权限的问题</a>
      </li>
    
      <li>
        <a href="/2023/07/operations/how-to-use-pm2.html">4. PM2 的安装、配置和使用</a>
      </li>
    
      <li>
        <a href="/2023/07/backend/expose-intranet-netcoreapi-to-internet.html">5. 通过 DDNS+显性URL 把内网部署的.NET CORE WEBAPI 项目暴露到公网中</a>
      </li>
    
  </ul>
</div>


  
<div class="widget tag">
  <h3 class="title"><i class="iconfont icon-tag"></i>&nbsp;&nbsp;标签</h3>
  <ul class="entry">
  
    <li><a href="/tags/net-core/">.net core</a><small>12</small></li>
  
    <li><a href="/tags/Debian/">Debian</a><small>2</small></li>
  
    <li><a href="/tags/Docker/">Docker</a><small>1</small></li>
  
    <li><a href="/tags/Elasticsearch/">Elasticsearch</a><small>35</small></li>
  
    <li><a href="/tags/Elasticsearch-Nest系列/">Elasticsearch.Nest系列</a><small>35</small></li>
  
    <li><a href="/tags/Obsidian/">Obsidian</a><small>1</small></li>
  
    <li><a href="/tags/PVE/">PVE</a><small>2</small></li>
  
    <li><a href="/tags/StackExchange-Redis系列/">StackExchange.Redis系列</a><small>12</small></li>
  
    <li><a href="/tags/centos/">centos</a><small>3</small></li>
  
    <li><a href="/tags/flex/">flex</a><small>1</small></li>
  
    <li><a href="/tags/ios/">ios</a><small>1</small></li>
  
    <li><a href="/tags/javascript/">javascript</a><small>1</small></li>
  
    <li><a href="/tags/linux/">linux</a><small>4</small></li>
  
    <li><a href="/tags/nginx/">nginx</a><small>2</small></li>
  
    <li><a href="/tags/nuget/">nuget</a><small>2</small></li>
  
    <li><a href="/tags/react/">react</a><small>6</small></li>
  
    <li><a href="/tags/styled-components/">styled-components</a><small>1</small></li>
  
    <li><a href="/tags/内网穿透/">内网穿透</a><small>4</small></li>
  
    <li><a href="/tags/培训讲义/">培训讲义</a><small>2</small></li>
  
    <li><a href="/tags/基础知识/">基础知识</a><small>2</small></li>
  
    <li><a href="/tags/性能优化/">性能优化</a><small>2</small></li>
  
    <li><a href="/tags/教程/">教程</a><small>64</small></li>
  
    <li><a href="/tags/理财/">理财</a><small>2</small></li>
  
    <li><a href="/tags/生命周期/">生命周期</a><small>1</small></li>
  
    <li><a href="/tags/经验/">经验</a><small>4</small></li>
  
  </ul>
</div>


  
  <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
  <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
  <div class="widget tag">
    <h3 class="title"><i class="iconfont icon-cloud1"></i>&nbsp;&nbsp;标签云</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        <a href="/tags/net-core/" style="font-size: 17.14px;">.net core</a> <a href="/tags/Debian/" style="font-size: 11.43px;">Debian</a> <a href="/tags/Docker/" style="font-size: 10px;">Docker</a> <a href="/tags/Elasticsearch/" style="font-size: 18.57px;">Elasticsearch</a> <a href="/tags/Elasticsearch-Nest系列/" style="font-size: 18.57px;">Elasticsearch.Nest系列</a> <a href="/tags/Obsidian/" style="font-size: 10px;">Obsidian</a> <a href="/tags/PVE/" style="font-size: 11.43px;">PVE</a> <a href="/tags/StackExchange-Redis系列/" style="font-size: 17.14px;">StackExchange.Redis系列</a> <a href="/tags/centos/" style="font-size: 12.86px;">centos</a> <a href="/tags/flex/" style="font-size: 10px;">flex</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/javascript/" style="font-size: 10px;">javascript</a> <a href="/tags/linux/" style="font-size: 14.29px;">linux</a> <a href="/tags/nginx/" style="font-size: 11.43px;">nginx</a> <a href="/tags/nuget/" style="font-size: 11.43px;">nuget</a> <a href="/tags/react/" style="font-size: 15.71px;">react</a> <a href="/tags/styled-components/" style="font-size: 10px;">styled-components</a> <a href="/tags/内网穿透/" style="font-size: 14.29px;">内网穿透</a> <a href="/tags/培训讲义/" style="font-size: 11.43px;">培训讲义</a> <a href="/tags/基础知识/" style="font-size: 11.43px;">基础知识</a> <a href="/tags/性能优化/" style="font-size: 11.43px;">性能优化</a> <a href="/tags/教程/" style="font-size: 20px;">教程</a> <a href="/tags/理财/" style="font-size: 11.43px;">理财</a> <a href="/tags/生命周期/" style="font-size: 10px;">生命周期</a> <a href="/tags/经验/" style="font-size: 14.29px;">经验</a>
      </canvas>
    </div>
  </div>




</aside>
    <div class="clearfix"></div>
  </div>
  <footer id="footer" class="inner"><div class="alignleft">

  
  &copy; 2018 - 2024 &nbsp;<a href='/about'>积慕</a>
  
  &nbsp;&nbsp;<a href='https://www.cnblogs.com/deepthought/'>我的博客园地址</a>
  &nbsp;&nbsp;finalclassic#outlook.com
</div>

<div class="clearfix"></div>
<div>
  本站主题基于：<a href='https://github.com/hexojs/hexo-theme-light' rel="external nofollow">hexo-theme-light</a>
</div>
<div id="busuanzi_container_site_pv">
  本站总访问量&nbsp;<span id="busuanzi_value_site_pv"></span>&nbsp;次
</div>
<div style="width:300px;margin:0 auto; padding:20px 0;">
  <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011702004805" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
    <img src="https://pic.zhuliang.ltd/20200102164648.png" style="float:left;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">沪公网安备 31011702004805号</p></a>
</div></footer>
  <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>




<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
  $('.fancybox').fancybox();
})(jQuery);
</script>


<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>

<!-- <script src="/js/busuanzi.pure.mini.js"></script> -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?ea793b9c8d6b31df666a6bc15038e246";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
</body>
</html>
